import { Demo1Component } from './demo1/demo1.component';
import { Demo2Component } from './demo2/demo2.component';
import { Demo3Component } from './demo3/demo3.component';
import { Demo4Component } from './demo4/demo4.component';
import { Demo5Component } from './demo5/demo5.component';
import { Demo6Component } from './demo6/demo6.component';
import { Demo7Component } from './demo7/demo7.component';

export const GroupConfig = {
  location: 'Group',
  description: '用于组件间的组合布局, 支持横向、纵向布局, 支持设置间距和边框重叠处理。',
  description_en:
    'Used in combined layouts among components. Horizontal and vertical layout are supported. Setting spacing and border overlapping are supported.',
  component: [
    {
      demo: Demo1Component,
      codePath: 'showcase/group/demo1/demo1.component',
      demoTitle: '横向布局',
      demoTitle_en: 'Horizontal Layout',
      demoDescription: '基础通用场景, 横向布局显示。',
      demoDescription_en: 'Basic general scene, horizontal layout display.',
      devDebug: true,
    },
    {
      demo: Demo2Component,
      codePath: 'showcase/group/demo2/demo2.component',
      demoTitle: '纵向布局',
      demoTitle_en: 'Vertical Layout',
      demoDescription: '基础通用场景,纵向布局显示。',
      demoDescription_en: 'Basic general scene, vertical layout display.',
    },
    {
      demo: Demo3Component,
      codePath: 'showcase/group/demo3/demo3.component',
      demoTitle: '间距',
      demoTitle_en: 'Spacing',
      demoDescription: '基础通用场景, 间距设置。',
      demoDescription_en: 'Basic general scene, spacing setting.',
    },
    {
      demo: Demo4Component,
      codePath: 'showcase/group/demo4/demo4.component',
      demoTitle: '嵌套',
      demoTitle_en: 'Nesting',
      demoDescription: '基础通用场景，边框重叠处理。',
      demoDescription_en: 'Basic general scene, border overlap processing.',
    },
    {
      demo: Demo5Component,
      codePath: 'showcase/group/demo5/demo5.component',
      demoTitle: '多列宽度自适应',
      demoTitle_en: 'Multi-column width Adaptation',
      demoDescription: '多列布局，宽度自适应布局。',
      demoDescription_en: 'Multi-column layout, width adaptive layout.',
    },
    {
      demo: Demo6Component,
      codePath: 'showcase/group/demo6/demo6.component',
      demoTitle: '多列宽度固定',
      demoTitle_en: 'Multi-column width Fixed',
      demoDescription: '多列布局，宽度固定布局。',
      demoDescription_en: 'Multi-column layout, fixed width layout.',
    },
    {
      demo: Demo7Component,
      codePath: 'showcase/group/demo7/demo7.component',
      demoTitle: '多列宽度混合',
      demoTitle_en: 'Multi-column width Mixing',
      demoDescription: '多列布局，多列宽度混合布局。',
      demoDescription_en: 'Multi-column layout, multi-column width mixed layout.',
      devDebug: true,
    },
  ],
  useRule: [],
  useSuggestion: [],
  selector: 'lv-group',
  snippet: `
    <lv-group>
      <button lv-button>
        Button1
      </button>
      <button lv-button>
        Button2
      </button>
    </lv-group>
  `,
  api: [
    {
      attribute: 'lvDirection',
      type: 'horizontal | vertical',
      default: 'horizontal',
      description: '布局方向',
      description_en: 'Direction of layout',
    },
    {
      attribute: 'lvGutter',
      type: 'none | number | string',
      default: 'none',
      description: '间距，支持无间距和自定义间距,单位只支持 px，如 8px。',
      description_en:
        'Spacing. No-spacing and customised spacing are supported, and the unit only supports px, such as 8px.',
    },
    {
      attribute: 'lvColumns',
      type: 'any[]',
      default: '[]',
      description:
        '1.设置后开启多列布局模式 2.数组长度为列数 3.数组值为列宽,支持 px, %, auto, 例 [100px,"auto"] 表示2列布局,第一列固定 100px, 第二列宽度占满剩余空间。',
      description_en:
        '1. Turn on the multi column layout mode after setting. 2. Array length is the number of columns. 3. Array value is column width, which supports px,%, auto. For example, [100px, "auto"] means two-column layout, and the first column is fixed at 100px, and the second column is full of the remaining space.',
    },
    {
      attribute: 'lvRowGutter',
      type: 'none | number | string',
      default: '8',
      description: '水平方向的间距，需开启多列布局。',
      description_en: 'Horizontal spacing. Multi-column layout needs to be enabled.',
    },
    {
      attribute: 'lvColumnGutter',
      type: 'none | number | string',
      default: '8',
      description: '垂直方向的间距，需开启多列布局。',
      description_en: 'Vertical spacing. Multi-column layout needs to be enabled.',
    },
    {
      attribute: 'lvWrap',
      type: 'boolean',
      default: 'false',
      description: '是否自动换行，仅在horizontal且lvColumns=[]时有效。',
      description_en: 'Whether to wrap automatically, only valid when horizontal and lvColumns=[].',
    },
  ],
  event: [],
};
